<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Element必要的依赖文件 -->
  <link rel="stylesheet" href="../../../plugins/element-ui/lib/theme-chalk/index.css">
  <script src="../../../plugins/vue/vue.js"></script>
  <script src="../../../plugins/element-ui/lib/index.js"></script>
  <script src="../../../plugins/axios/axios.min.js" type="text/javascript"></script>
  <script src="../../../js/request.js"></script>
  <script src="../../../api/system/module.js"></script>
  <script src="../../../js/validate.js"></script>
  <script src="../../../js/index.js"></script>
  <style>
    /* 实现提示部分超出一行自动换行 */
    .el-tag {
      white-space: normal;
      height: auto;
    }
  </style>

<body>
  <!-- div关联Vue依赖 -->
  <div id="div">
    <!-- 提示 -->
    <el-tag type="success" style="margin-top: 15px;margin-bottom: 15px;" width="80">
        当模块为按钮时，"图标"字段标识按钮识别符号，新增为"add"，修改为"update"，删除为"del"，其他按钮请遵循与管理员的约定。
    </el-tag>
    <!-- 新增数据表单start -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!--模块序号-->
      <el-form-item label="模块序号" prop="sort">
        <el-input v-model="ruleForm.sort" maxlength="10"></el-input>
      </el-form-item>
      <!-- 模块名称 -->
      <el-form-item label="模块名" prop="name">
        <el-input v-model="ruleForm.name" maxlength="10"></el-input>
      </el-form-item>
      <!-- 上级模块菜单需要发起请求 -->
      <el-form-item label="上级模块" prop="parentId">
        <el-select v-model="ruleForm.parentId" placeholder="请选择上级模块">
          <el-option v-for="(item,index) in moduleList" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!--模块类型-->
      <el-form-item label="类型" prop="ctype">
        <el-radio-group v-model="ruleForm.ctype">
          <el-radio label="主菜单"></el-radio>
          <el-radio label="二级菜单"></el-radio>
          <el-radio label="按钮"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!--模块状态-->
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="ruleForm.state">
          <el-radio label="启用"></el-radio>
          <el-radio label="禁用"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 模块对应链接地址 -->
      <el-form-item label="链接" prop="curl">
        <el-input v-model="ruleForm.curl"></el-input>
      </el-form-item>
      <!-- 模块对应请求地址 -->
      <el-form-item label="请求地址" prop="req">
        <el-input v-model="ruleForm.req"></el-input>
      </el-form-item>
      <!-- 模块对应图标 -->
      <el-form-item label="图标" prop="icon">
        <el-input v-model="ruleForm.icon"></el-input>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增数据表单end -->
  </div>
</body>
<!-- js代码部分 -->
<script>
  // Vue核心对象
  new Vue({
    el: "#div",
    data() {
      return {
        //如果是修改，责标记当前id
        id: '',
        //标记当前状态为新增还是修改
        actionType: '',
        //查询的模块列表数据
        moduleList: [],
        //表单提交的数据
        ruleForm: {
          name: '',
          parentId: '',
          ctype: '',
          state: '启用',
          curl: '',
          remark: ''
        },
        // 数据验证
        rules: {
          sort: [
            // 验证规则有先后顺序，验证数字将强制转型，无法再进行后面的长度验证，因此将长度验证放在前面
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
            { required: true, 'validator': validNum, 'trigger': 'blur' }
          ],
          name: [
            { required: true, message: '请输入模块名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          ctype: [
            { required: true, message: '请选择模块类型', trigger: 'change' }
          ],
          state: [
            { required: true, message: '请选择模块状态', trigger: 'change' }
          ],
          curl: [
            { required: true, message: '请输入模块链接地址', trigger: 'blur' },
          ],req: [
            { required: true, message: '请输入模块请求地址', trigger: 'blur' },
          ],
        }
      };
    },
    //钩子函数，创建页面时被初始化
    created() {
      //加载部门列表数据
      this.getModuleListAll()
      //从请求路径中获取id数据
      this.id = requestUrlParam('id')
      //判断id是否存在，确定当前是新增还是修改的状态
      this.actionType = this.id ? 'edit' : 'add'
      //如果id存在，则执行初始化方法， 根据id查询数据
      if (this.id) {
        this.init()
      }
    },
    mounted() {

    },
    methods: {
      // 初始化方法，获取模块列表
      getModuleListAll() {
        getModuleListAll().then(res => {
          if (res.code === 1) {
            this.moduleList = res.data
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        })
      },
      //初始化方法：根据id查询单条数据，进行修改时的数据回显
      async init() {
        queryModuleById(this.id).then(res => {
          console.log(res)
          if (String(res.code) === '1') {
            this.ruleForm = { ...res.data }
            this.ruleForm.ctype = res.data.ctype === '0' ? '主菜单' : res.data.ctype === '1' ? '二级菜单' : '按钮'
            this.ruleForm.state = res.data.state === '1' ? '启用' : '禁用'
          } else {
            this.$message.error(res.msg || '操作失败')
          }
        })
      },
      //重置数据的方法
      resetForm(ruleForm) {
        this.ruleForm = {
          name: '',
          parentId: '',
          ctype: '',
          state: '启用',
          curl: '',
          remark: ''
        }
      },
      // 提交数据的方法
      submitForm(formName, st) {
        //01.判断数据是否通过验证
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //获取要提交的数据
            let params = {
              //获取其他数据
              ...this.ruleForm,
              //状态值转换
              state: this.ruleForm.state === '启用' ? '1' : '0',
              //模块类型转换
              ctype: this.ruleForm.ctype == '主菜单' ? '0' : this.ruleForm.ctype == '二级菜单' ? '1' : '2'
            }
            // params.flavors = this.dishFlavors
            //如果是新增方法，则删除id数据
            if (this.actionType == 'add') {
              delete params.id
              //调用方法，提交数据
              addModule(params).then(res => {
                //根据返回值进行提示res.code === 1
                if (res.code === 1) {
                  parent.index.$message.success('参数添加成功！')
                  if (!st) {
                    //重置数据
                    this.resetForm();
                    //关闭窗口
                    parent.index.dialogVisible = false
                    //刷新数据
                    parent.index.reloadIframe()
                  } else {
                    //重置表单数据
                    this.resetForm()
                  }
                } else {
                  parent.index.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                parent.index.$message.error('请求出错了：' + err)
              })
            } else {
              //如果是修改的方法，责需要携带id
              delete params.updateTime
              editModule(params).then(res => {
                if (res.code === 1) {
                  parent.index.$message.success('修改成功！')
                  //关闭窗口
                  parent.index.dialogVisible = false
                  //刷新数据
                  parent.index.handleQuery()
                } else {
                  parent.index.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                parent.index.$message.error('请求出错了：' + err)
              })
            }
          } else {
            return false
          }
        })
      },

    }
  });
</script>

</html>